<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <!-- 第一个card -->
          <Detail title="分数折线图" :content="lineContent">
            <template slot="charts">
              <lineCharts :lineInfo="lineInfo"></lineCharts>
            </template>
            <template slot="footer">
              <span>平均分：{{lineInfo.avgScore.toFixed(1)}}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="分数饼状图" content="成绩评价占比">
            <template slot="charts">
              <pieChart :pieInfo="pieInfo"></pieChart>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="参加考试人数" :content="progressContent">
            <template slot="charts">
              <progressCharts :progressInfo="progressNum"></progressCharts>
            </template>
            <template slot="footer">
              <span>考试人数：{{this.attenderTotal+this.cheaterTotal}}/{{this.allStudentsTotal}}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="事件">
            <template slot="charts">
              <el-badge :value="cheaterTotal" class="item">
                <el-button size="small" @click="showCheater()">作弊</el-button>
              </el-badge>
              <el-badge :value="noAttenderTotal" class="item">
                <el-button size="small" @click="showNoAttender()">未参加</el-button>
              </el-badge>
              <el-badge :value="attenderTotal" class="item" type="primary">
                <el-button size="small" @click="showAttender()">参加</el-button>
              </el-badge>
              <el-badge :value="allStudentsTotal" class="item" type="warning">
                <el-button size="small" @click="showAllStudents()">所有</el-button>
              </el-badge>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="showTitle" :visible.sync="dialogTableVisibleStu" width="55%">
        <el-table :data="showPeople">
            <el-table-column prop="prop" label="头像" width="100">
                <template slot-scope="{row,$index}">
                    <el-avatar shape="square" size="large" :src="row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="80"></el-table-column>
            <el-table-column prop="number" label="学号" width="100"></el-table-column>
            <el-table-column prop="prop" label="成绩" width="50">
              <template slot-scope="{row,$index}">
                  <el-tag
                  :type="scoreStyle(row.studentConnection.totalScore)"
                  disable-transitions>{{row.studentConnection.totalScore}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="标签" width="100">
              <template slot-scope="{row,$index}">
                <el-tag v-if="row.studentConnection.isCheated"
                type="danger"
                disable-transitions>作弊</el-tag>
                <el-tag v-if="!row.studentConnection.isCheated"
                :type="row.studentConnection.isAttend==1? 'success' : 'info'"
                disable-transitions>{{row.studentConnection.isAttend==1?'参加':'未参加'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="70">
                <template slot-scope="{row,$index}">
                  <el-button type="primary" size="mini">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Detail from './Detail'
import lineCharts from './lineChart'
import pieChart from './pieChart'
import progressCharts from './progressCharts'
export default {
  name:'',
  components:{
    Detail,
    lineCharts,
    pieChart,
    progressCharts,
  },
  props:['examInfo'],
  data() {
    return {
      // 用于折线图
      lineInfo:{
        avgScore: 0,
        maxScore: 0,
        minScore: 0,
      },
      // 试卷总分
      totalScore:0,
      // 饼图数据
      pieInfo:{
        unqualifiedNum:0,
        qualifiedNum:0,
        goodNum:0,
        excellentNum:0,
      },
      // 作弊者
      cheater:[],
      // 未参加，但是不是作弊者
      noAttender:[],
      // 参加考试者
      attender:[],
      // 所有人
      allStudents:[],
      // 数量
      cheaterTotal:0,
      noAttenderTotal:0,
      attenderTotal:0,
      allStudentsTotal:0,
      // 当前人员显示数组
      showPeople:[],
      // 显示人员表格
      dialogTableVisibleStu:false,
      // 显示人员表格标题
      showTitle:'',
    }
  },
  computed:{
    lineContent(){
      return "最低分:"+this.lineInfo.minScore.toFixed(1)+",最高分:"+this.lineInfo.maxScore.toFixed(1);
    },
    progressContent(){
      return Number((this.attenderTotal+this.cheaterTotal)/this.allStudentsTotal*100)+'%';
    },
    progressNum(){
      return Number((this.attenderTotal+this.cheaterTotal)/this.allStudentsTotal*100);
    },
  },
  methods: {
    // 成绩展示样式
    scoreStyle(score){
      if(score>=this.lineInfo.avgScore){
        return 'success';
      }else{
        return 'danger';
      }
    },
    // 展示所有学生
    showAllStudents(){
      this.showTitle = '所有学生名单';
      this.showPeople = this.allStudents;
      this.dialogTableVisibleStu = true;
    },
    // 展示参加学生
    showAttender(){
      this.showTitle = '参加学生名单';
      this.showPeople = this.attender;
      this.dialogTableVisibleStu = true;
    },
    // 展示未参加学生
    showNoAttender(){
      this.showTitle = '未参加学生名单';
      this.showPeople = this.noAttender;
      this.dialogTableVisibleStu = true;
    },
    // 展示作弊学生
    showCheater(){
      this.showTitle = '作弊学生名单';
      this.showPeople = this.cheater;
      this.dialogTableVisibleStu = true;
    },
    // 分析各类学生
    async getAllKindsOfStudent(){
      // 条件
      /*
        // 获取信息列表的body条件
            examStudentVo:{
                current:1,
                limit:5,
                examId:'',
                studentId:null,
                studentName:null,
                sex:null,
                age:null,
                //是否作弊
                isCheated:null,
                //是否以阅卷，-1,0,1
                isMarked:null,
                // 是否已参加考试，-1,0,1
                isAttended:-1,
            },
      */
      // 应该是在这里剥离出作弊人，未参加人，参加人，所有人数据


      // 作弊者
      let params = {
        examId:this.examInfo.id,
        isCheated:true,
      }
      let result = await this.$API.gradeStatistics.getAllStudentForExam(params);
      if(result.code==20000){
        this.cheater = result.data.rows;
        this.cheaterTotal = result.data.total;
      }


      // 未参加者
      params = {
        examId:this.examInfo.id,
        isCheated:false,
        isAttended:-1,
      }
      result = await this.$API.gradeStatistics.getAllStudentForExam(params);
      if(result.code==20000){
        this.noAttender = result.data.rows;
        this.noAttenderTotal = result.data.total;
      }


      // 参加者
      params = {
        examId:this.examInfo.id,
        isCheated:false,
        isAttended:1,
      }
      result = await this.$API.gradeStatistics.getAllStudentForExam(params);
      if(result.code==20000){
        this.attender = result.data.rows;
        this.attenderTotal = result.data.total;
      }


      // 所有人
      params = {
        examId:this.examInfo.id,
      }
      result = await this.$API.gradeStatistics.getAllStudentForExam(params);
      if(result.code==20000){
        this.allStudents = result.data.rows;
        this.allStudentsTotal = result.data.total;
      }


    },
    // 计算各等第人数数据
    async getPieData(){
      let result = await this.$API.gradeStatistics.queryNumberOfPerScore(this.examInfo.id);
      if(result.code==20000){
        // 各成绩人数数组
        var array = result.data.result;
        // 计算出各等级人数
        // 合格与良的分数
        var qualifiedScore = this.totalScore*0.6;
        var goodScore = this.totalScore*0.8;
        var excellentScore = this.totalScore*0.9;
        for(var i=0;i<array.length;i++){
          var item = array[i];
          if(item.score>=excellentScore){
            this.pieInfo.excellentNum+=item.number;
          }else if(item.score>=goodScore){
            this.pieInfo.goodNum+=item.number;
          }else if(item.score>=qualifiedScore){
            this.pieInfo.qualifiedNum+=item.number;
          }else{
            this.pieInfo.unqualifiedNum+=item.number;
          }
        }
      }
    },
    // 获得最高分，最低分，平均分
    async getMaxMinAvgScore(){
      let result = await this.$API.gradeStatistics.getMaxMinAvgScoreOfExam(this.examInfo.id);
      if(result.code==20000){
        this.lineInfo = result.data.result;
      }
    },
    // 获得总分
    async getTotalScoreOfPaper(){
      let result = await this.$API.gradeStatistics.getTotalScoreOfPaper(this.examInfo.paperId);
      if(result.code==20000){
        this.totalScore = result.data.totalScore;
      }
    }
  },
  watch:{
    examInfo:{
      handler(){
        this.getMaxMinAvgScore();
        this.getTotalScoreOfPaper();
        this.getPieData();
        this.getAllKindsOfStudent();
      }
    },
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 20px;
}
</style>